<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>mode</view>
				<view>String</view>
				<view>无</view>
				<view>弹出框方案名，定义在options.js</view>
			</view>
			<view class="tr">
				<view>options</view>
				<view>Object</view>
				<view>无</view>
				<view>特殊设置覆盖，详情见下</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>shift</view>
					<view>Object</view>
					<view>无</view>
					<view>窗口偏移</view>
				</view>
				<view class="appendix">
					格式：{top:"数值与单位",bottom:"数值与单位"}，可用calc
				</view>
			</view>
			<view class="tr">
				<view>@opened</view>
				<view>事件</view>
				<view></view>
				<view>窗口已打开事件，用于判断可使用$refs。提交窗口状态</view>
			</view>
			<view class="tr">
				<view>@closed</view>
				<view>事件</view>
				<view></view>
				<view>窗口已关闭事件，动画结束。提交窗口状态</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view></view>
				<view>窗口状态变更事件，提交窗口状态</view>
			</view>
			<view class="tr">
				<view>@maskClick</view>
				<view>事件</view>
				<view></view>
				<view>遮罩点击事件</view>
			</view>
			
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				本组件作为vi-popup组件的方案定制器，用于立即成型，快速调用
			</view>
			<view class="py-sm">
				基本使用：{{'&lt;common-popup ref="组件id" mode="方案名">内容&lt;/common-popup>'}}
				<view>
					使用refs调用组件的open方法打开
				</view>
			</view>
			<view class="py-sm">
				<common-popup ref="demo1" mode="form-bottom">内容区form-bottom</common-popup>
				<vi-button @click="openWin('demo1')">表格用底部</vi-button>
			</view>
			<view class="py-sm">
				<common-popup ref="demo2" mode="form-center">内容区form-center</common-popup>
				<vi-button @click="openWin('demo2')">表格用中部</vi-button>
			</view>
			<view class="py-sm">
				<common-popup ref="demo3" mode="full-top" :shift="shiftTop">内容区full-top</common-popup>
				<vi-button @click="openWin('demo3')">顶部满宽</vi-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
